<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>箭头函数</title>
</head>

<body>
  <script>
    // var a = 18
    // function test() {
    //   setTimeout(() => {
    //     console.log('()=>', this.a)//17
    //   }, 10);
    //   setTimeout(function () {
    //     console.log('function', this.a)//18
    //   }, 10);

    // }
    // test.call({a:17})

    // 箭头函数不适用与定义对象内部方法
    // const obj ={
    //   age:18,
    //   test:()=>{
    //     console.log(this.age,'obj',this) //undefined obj window
    //   }
    // }
    // obj.test()

    // this 基础语法
    // (param1, param2, …, paramN) => { statements }
    // (param1, param2, …, paramN) => expression
    //   //相当于：(param1, param2, …, paramN) =>{ return expression; }

    //   // 当只有一个参数时，圆括号是可选的：
    //   (singleParam) => { statements }
    // singleParam => { statements }

    // // 没有参数的函数应该写成一对圆括号。
    // () => { statements }

    // 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

    // class father {
    //   constructor(){
    //     this.age=17
    //     setTimeout(() => {
    //       console.log(this.age) //指向构造函数实例
    //     }, 10);
    //   }
    // }
    // const p=new father(); //17

    // var age = 17

    // function test() {
    //   let age = 18;
    //   const p = function () {
    //     console.log(this.age, '0')
    //   }
    //   const p1 = () => {
    //     console.log(this.age, '1')
    //   }
    //   const p2 = function () {
    //     setTimeout(function () {
    //       console.log(this.age, '2')
    //     }, 10);
    //   }
    //   const p3 = function () {
    //     setTimeout(() => {
    //       console.log(this.age, '3')
    //     }, 10);
    //   }
    //   const p4 = () => {
    //     setTimeout(function () {
    //       console.log(this.age, '4')
    //     }, 10);
    //   }
    //   const p5 = () => {
    //     setTimeout(() => {
    //       console.log(this.age, '5')
    //     }, 10);
    //   }
    //   const p6 = () => {
    //     setTimeout(function () {
    //       console.log(this.age, '6')
    //     }, 10);
    //   }
    //   p(); 
    //   p1();
    //   p2();
    //   p3();
    //   p4();
    //   p5();
    //   p4.call({age:15});
    //   p6.call({age:15});
    // }
    // // test() //都为17
    // test.call({age:16})
    // // 17 '0'
    // // 16 '1'
    // // 17 '2'
    // // 17 '3'
    // // 17 '4'
    // // 16 '5'
    // // 17 '4'
    // // 17 '6'

    // 箭头函数让this指向固化,绑定this使得它不再可变,使用apply,call和bind也无法改变
    // var age=17
    // const p=()=>{console.log(this.age)}
    // p.call({age:18}) //17

    // 不绑定arguments
    // const p=(...rest)=>{console.log(rest)}
    // p(1,2,3) 

    // 不能和 new 操作符连用
    // const p=(...rest)=>{console.log(rest)}
    // const p1=new p()
    
    // 没有prototype属性
    const p=(...rest)=>{console.log(rest)}
    console.log(p.prototype) // undefined
  </script>
</body>

</html>